/*
 * @Title: 电商购物-首页
 * @Created by: ycq 
 */
<template>
	<view>
		<view class="banner">
			<view class="banner-swiper">
				<view class="dot-main">
					<view :class="['dot-item',current==index-1?'active':'']" v-for="index in bannerData.length" :key="index"></view>
				</view>
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" circular='true' :duration="1000" @change="change">
				    <swiper-item v-for="(item,index) in bannerData" :key='index'>
				        <view class="swiper-item" >
							<img :src='item.img' alt="">
				        </view>
				    </swiper-item>
				</swiper>
			</view>
			<view class="banner-top">
				<HeaderNavInput :config="navConfig" :focusHandle='openSearch' :rightTapHandle1="rightTapHandle1"/>
			</view>
		</view>
		<!-- <view class="car" @click="toCar"><image src="/static/buycar.png"></image><text>购物车</text></view> -->
		<view class="type">
			<view class="type-area">
				<!-- <scroll-view class="scroll-view_H" scroll-y="false" scroll-x="true" @scroll="scroll" scroll-left="0">
                    <view  class="scroll-view-item_H " @click="chooseType(index)" :class="index == typeIndex ? 'scroll-view-item_H-ac':''" v-for="(item,index) in typeData" :key='index'>{{item.type}}</view>
                </scroll-view> -->
				 <view  class="scroll-view-item_H " @click="chooseType(index)" :class="index == typeIndex ? 'scroll-view-item_H-ac':''" v-for="(item,index) in typeData" :key='index'>{{item.type}}</view>
			</view>
			<view class="type-btn" @click="toType"><image src="/static/shop/tabMore.png"></image></view>
		</view>
		<view class="goods-list">
			<view class="list-title">
				<span class='shu'></span>
				<span>热门商品</span>
			</view>
			<view class="goods-item" v-for='(item,index) in goodsData' :key='index'   @touchmove="gtouchmove()" @touchstart='tcStart(index)' @touchend.prevent="touchend">
				<!-- <view class="other-btn" @click="openMask(index)">
					<view class="other-btn-dot"></view><view class="other-btn-dot"></view><view class="other-btn-dot"></view>
				</view> -->
				<view class="item-btns" v-if="openIndex == index">
					<view class="item-btn">
						<image src="/static/nolike.png"></image>
						<text>不感兴趣</text>
					</view>
					<view class="item-btn">
						<image src="/static/pingbi.png"></image>
						<text>屏蔽:扇子</text>
					</view>
					<view class="item-btn">
						<image src="/static/bushi.png"></image>
						<text>图片引起不适</text>
					</view>
					<view class="item-btn" @tap="gosameAs">
						<text>找同款</text>
					</view>
				</view>
				<view>
					<image class="item-img" :src="item.img"></image>
					<image src="/static/shop/indexList.png" class="indexList" @tap="dot()"></image>
					<text class="title">
						{{item.title}}
					</text>
					<text class="prize" >￥{{item.prize}}<text class="p-dot">{{item.prizeD}}</text></text>
					<text class="buyNum" >{{item.buyNum}}人付款</text>
				</view>
				
			</view>
			
		</view>
		<view style="height: 19vw;"></view>
		
		<ShopFootMenu :navIndex='0' />
		<top-view></top-view>
	</view>
</template>

<script>
	import ShopFootMenu from '@/components/ShopFootMenu.vue'
	export default{
		data(){
			return{
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				typeIndex:0,
				isMoving:false,
				isMask:false,
				openIndex:null,
				typeData:[
					{type:'全部',id:0},{type:'美妆',id:1},{type:'女装',id:2},{type:'鞋靴',id:3},{type:'箱包',id:4},
					{type:'食品',id:5}
				],
				navConfig: {
					left:{
						leftExist:false,
						ifleftGoback:true,
						leftGoback:'arrowleft',
						leftGobackColor:'#ffffff',
						leftIconName:'',
						leftIcon:''
					},
					mid:{
						ifSearch:true,
						isdisabled:true,//是否禁用搜索框
						placeText:'请输入搜索内容'
						},
					right:{
						rightExist:true,
						rightIcon1:'/static/msg.png',
						rightIcon2:'',
						rightIconName1:'',
						rightIconName2:'',
						ifrightIcon2:false,
						ifrightIcon1:true
					},
					row:{
					   isShowRightRow:false, //是否显示右侧图标文字横排
					   rowText:'',//文字内容
					   rowIco:'',//icon
					   rowTextColor:'',//文字颜色
					   rowIcoColor:''//icon颜色
					}
				},
				goodsData:[
					{
						title:'宫廷古风中国风口红 长相思持久保湿防水',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:123123
					},
					{
						title:'国粹京剧脸谱戏曲Q版人物吊坠书签金属创意古风',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1223
					},
					{
						title:'中国特色礼物送老外北京特色工艺品京剧脸谱摆件商务外事出国礼品',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1564
					},
					{
						title:'砚台天然原石 复刻故宫博物院款式 松花砚',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:2333
					}
				],
				bannerData:[
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
					{img:'/static/banner.png'},
				],
				current: 0
			}
		},
		components:{
			ShopFootMenu
		},
		methods: {
			dot(){
				console.log(333);
			},
			rightTapHandle1(){
				uni.switchTab({
					url:'/pages/lvyouquan/lvyouquan'
				})
			},
			change(e) {
				this.current = e.detail.current;
				
			},
			openMask(index){
				if(this.openIndex != index){
					this.openIndex = index
				}else{
					this.openIndex = null
				}
			},
			gosameAs(){
				console.log(666);
				uni.navigateTo({
					url:'gosameAs'
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			chooseType(index){
				this.typeIndex = index
			},
			toDetail(){
				uni.navigateTo({
					url:'shopDetail'
				})
			},
			toCar(){
				uni.navigateTo({
					url:'buyCar'
				})
			},
			tcStart(index){
				
				clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
				if(this.openIndex != index){
					console.log('tcStart',this.openIndex);
					this.Loop = setTimeout(function() {
						this.openMask(index)
						this.isMask = true
					}.bind(this), 500);
				}
				else{
					// this.openMask(index )
				}
			},
			touchend() {
				console.log('touchend');
				clearTimeout(this.Loop);
				// if (this.Loop != 0 && this.isMask == false && !this.isMoving) {
				// 	this.toDetail()
				//  }
				  
				this.isMoving = false
				this.isMask = false
			},
			gtouchmove(){
				console.log('gtouchmove');
				this.isMoving = true
                clearTimeout(this.Loop);//清除定时器;
            },
			openSearch(){
				uni.navigateTo({
					url:'shopSearch',
					animationType:'slide-in-bottom'
				})
			},
			toType(){
				uni.navigateTo({
					url:'goodsType'
				})
			}
		}
	}
</script>

<style scoped>
	
	/* 购物车 */
		
	
	.car{
		width: 88upx;
		height: 88upx;
		background: #FFFFFF;
		position: fixed;
		top: 687upx;
		right: 10upx;
		z-index: 20;
		border-radius: 50%;
		text-align: center;
		
	}
	.car image{
		width: 39upx;
		height: 37upx;
		margin-top: 14upx;
	}
	.car text{
		width: 100%;
		display: block;
		margin-top: -10upx;
		color: #0075EE;
		font-size:15upx;
	}
	/* banner */
	.banner{
		width: 750upx;
		height: 468upx;
		background: #007AFF;
		position: relative;
	}
	.banner-top{
		width: 750upx;
		height: 60upx;
		position: absolute;
		/* margin-top: 53upx; */
	}
	.banner-swiper{
		width: 750upx;
		height: 468upx;
		position: absolute;
	}
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.swiper-item img{
		width: 100%;
		height: 100%;
	}
	.dot-main {
		width: 750upx;
		height: 20upx;
		top:439upx;
		
		display: flex;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 12upx;
		height: 12upx;
		border-radius: 15upx;
		background: rgba(0,0,0,0.5);
		margin: 0 1%;
		box-sizing: border-box;
	}
	.active {
		width: 24upx;
		background: #ffffff;
	}
	/* 类别 */
	.type{
		width: 750upx;
		height: 79upx;
	}
	.type-area{
		width: 675upx;
		height: 79upx;
		overflow-y: hidden;
		float: left;
	}
	.type-btn{
		width: 74upx;
		height: 79upx;
		float: right;
		/* border-left: #666666 inset 1upx; */
		box-shadow:2px -9px 10px #868484
	}
	.type-btn image{
		width: 34upx;
		height: 30upx;
		margin-left: 18upx;
		margin-right: 20upx;
		margin-top: 20upx;
	}
	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 92upx;
		height: 79upx;
		color: #999999;
		text-align: center;
		font-size: 24upx;
		margin: 2%  1% 2% 1%;
	}
	.scroll-view-item_H-ac{
		color: #55A0FF;
	}
	.scroll-view-item_H view{
		box-sizing: border-box;
	}
	.scroll-view-item_H view:nth-child(1){
		width: 100%;
		text-align: right;
		padding: 1% 4%;
	}
	.scroll-view-item_H view:nth-child(2){
		width: 100%;
		height: 120upx;
	}
	.scroll-view-item_H view:nth-child(2) image{
		width: 100upx;
		height: 100upx;
	}
	.scroll-view-item_H view:nth-child(3){
		width: 100%;
		height: 50upx;
	}
	.scroll-view-item_H view:nth-child(4){
		width: 100%;
		height: 50upx;
	}
	
	/* 商品列表 */
	.goods-list{
		width: 710upx;
		margin-left: 20upx;
		margin-right: 20upx;
		height: auto;
		/* touch-action: none; */
		display: table;
	}
	.list-title{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		height: 8vw;
		margin-top: 3vh;
	}
	.list-title span{
		font-size: 28upx;
		color: #010101;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.goods-item{
		
		width: 338upx;
		height: 515upx;
		margin-top: 24upx;
		position: relative;
	}
	.indexList{
		position: absolute;
		top:18upx;
		right:12upx;
		width:49upx;
		height: 29upx;
	}
	.goods-item:nth-child(even){
		float: left;
	}
	.goods-item:nth-child(odd){
		float: right;
	}
	.goods-item .item-img{
		width: 338upx;
		height: 336upx;
		border-radius: 15upx 15upx 0 0;
	}
	.goods-item .title{
		padding-left: 24upx;
		padding-right: 24upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: PingFang SC Regular;
		font-size: 26upx;
	}
	.prize{
		height: 30upx;
		color: #55A0FF;
		float: left;
		font-size: 30upx;
		margin-top: 50upx;
		margin-left: 24upx;
		text-align: left;
	}
	.p-dot{
		font-size: 24upx;
	}
	.buyNum{
		width: 200upx;
		float: right;
		text-align: right;
		font-size: 25upx;
		color: #999999;
		margin-right: 24upx;
		margin-top: 56upx;
	}
	.other-btn{
		width: 49upx;
		height: 29upx;
		background: rgba(0,0,0,0.5);
		z-index: 10;
		right: 9upx;
		top:9upx;
		border-radius: 15upx;
		display: flex;
		flex-direction: row;
		position: absolute;
		justify-content: center;
	}
	.other-btn-dot{
		width: 6upx;
		height: 6upx;
		margin-left: 2upx;
		margin-right: 2upx;
		margin-top: 11upx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.item-btns{
		position: absolute;
		width: 338upx;
		height: 455upx;
		padding-top: 60upx;
		border-radius: 15upx;
		z-index: 8;
		background: rgba(0,0,0,0.5);
	}
	.item-btns image{
		width: 36upx;
		height: 36upx;
		margin-top: 10upx;
		margin-right: 10upx;
	}
	.item-btn{
		width: 260upx;
		height: 60upx;
		background: #FFFFFF;
		border-radius: 50upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.item-btn text{
		font-size: 26upx;
		color: #333333;
		line-height: 60upx;
	}
</style>
